<template>
  <div id='wrap'>
    <h1>v-show & v-if</h1>
    <p class="pnav" v-if="isShowP">我是第一个p标签</p>
    <p class="pmain" v-show="isShowP">我是第二个p标签</p>
    <button @click="()=>(isShowP=!isShowP)">控制显示与隐藏</button>
    <hr>
    <p v-if="shiNum==1" @click="shiNum=2">牢大复活赛打赢了</p>
    <p v-else @click="shiNum=1">牢大复活赛打输了</p>
    <hr>
    <p v-if="shiNum==1">太好了，是牢大，我们有救了</p>
    <p v-else-if="shiNum==2">你不是牢大，完了</p>
    <p v-else-if="shiNum==3">丸辣</p>
    <p v-else>我们没救了</p>
    <button @click="shiNum=1">shiNum：1</button>
    <button @click="shiNum=2">shiNum：2</button>
    <button @click="shiNum=3">shiNum：3</button>
    <button @click="shiNum=4">shiNum：else</button>
    <hr>
    <ul>
        <li v-for="item in 'aebas'" :key="item">{{ item }}</li>
    </ul>
    <hr>
    <ul>
        <li v-for="item in 10" :key="item">{{ item }}</li>
    </ul>
    <hr>
    <ul>
        <li v-for="(item,index) in arrays" :key="index">{{ `item:${item} index:${index}` }}</li>
    </ul>
    <hr>
    <ul>
        <li v-for="(item,key) in objs" :key="key">{{ `item:${item} index:${key}` }}</li>
    </ul>
    <hr>
    <ul>
        <li v-for="(item,key,index) in objs" :key="key">{{ `item:${item} index:${index} key:${key}` }}</li>
    </ul>
    <hr>
    <ul>
        <li v-for="(item,key) in mySet" :key="key">{{ `item:${item} key:${key}` }}</li>
    </ul>
    <hr>
    <ul>
        <li v-for="(item,key) in myMap" :key="key">{{ `${item}---${item[0]}---${item[1]}` }}</li>
    </ul>
    <hr>
    <p>{{ inputVal }}</p>
    <input type="text" v-model="inputVal">
    <button @click="inputVal='修改后的inputVal'">修改inputVal</button>
  </div>
</template>

<script lang='ts'>
export default {
  name: 'stss',
}
</script>

<script lang='ts' setup>
import { ref } from "vue"
const isShowP=ref(true)
const shiNum=ref(1)
const arrays=['太好了','是牢大','我们有救了','丸辣','牢大坠机了','我们没救了']
const objs={a:'牢大',b:'不要',c:'再去',d:'坠机'}
const mySet=new Set()
mySet.add('apple')
mySet.add('banana')
mySet.add('orange')
mySet.add('apple')
const myMap=new Map()
myMap.set('apple',2)
myMap.set('banana',3)
myMap.set('orange',5)
myMap.set('apple',6)
const inputVal=ref('default')
</script>

<style scoped lang='scss'>
@use '@/assets/common.scss'
</style>